<style type="text/css">
  /*上传进度条*/
  .panel-hint {
      position: fixed;
      top: 20%;
      left: 0;
      right: 0;
      z-index: 99;
      margin: 0 auto;
      width: 795px;
      height: 502px;
      background: #fff;
      -webkit-box-shadow: 0px 3px 15px rgba(0,0,0,.3);
      -moz-box-shadow: 0px 3px 15px rgba(0,0,0,.3);
      box-shadow: 0px 3px 15px rgba(0,0,0,.3);
  }
  .panel-process {
    /*display: none;*/
    height: 90px;
    width: 620px;
    padding: 50px 30px 0;
    border-radius: 15px;
    top:20%;
  }
  .panel-word {
      font-size: 15px;
  }
  .panel-underline {
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
  }
  .loadBar {
      display: inline-block;
      width: 565px;
      height: 10px;
      margin: 12px auto;
      border-radius: 20px;
      position: relative;
      background: #D4D9DD;
      box-shadow: inset 0 0 2px 1px #d1d1d1;
  }
  .loadBar div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
  }
  .loadBar div span, .loadBar div i {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      border-radius: 20px;
  }
  .loadBar div i {
      width: 100%;
      animation: move .8s linear infinite;
      -webkit-animation: linear .8s ease infinite;
      background: -webkit-linear-gradient(left top, #D7AF46 0%, #D7AF46 10%, #FCC95A 10%, #FCC95A 50%, #D7AF46 50%, #D7AF46 60%, #FCC95A 60%, #FCC95A 100%);
      background-size: 8px 8px;
  }
  .loadBar .percentNum {
      position: absolute;
      top: -40px;
      left: 0;
      padding: 6px 8px;
      border-radius: 6px;
      border: 1px solid #52A0EB;
      background-color: #52A0EB;
      color: #fff;
  }
  .panel-process .icon-cross {
      display: inline-block;
      vertical-align: 10px;
      margin-left: 20px;
      width: 15px;
      height: 15px;
      background: url(images/sprit.png) no-repeat 0 -438px;
  }
</style>
<div class="panel-hint panel-process" id="panelProcess">
  <span class="panel-word">自动解压安装</span>
  <div class="panel-underline">
    <div id="loadBar" class="loadBar">
      <div>
      <span class="percent">
         <i></i>
      </span>
      </div>
      <span class="percentNum">0%</span>
    </div>
    <span class="icon-cross" id="btnClose"></span>
  </div>
</div>

<script type="text/javascript">
//上传进度条
// loadStart();
  function LoadingBar(id) {
    this.loadbar = document.getElementById(id);
    this.percentEle = this.loadbar.children[0].firstElementChild;
    this.percentNumEle = this.loadbar.lastElementChild;
    this.max = 100;
    this.currentProgress = 0;
  };
  LoadingBar.prototype = {
    constructor: LoadingBar,
    setMax: function (maxVal) {
      this.max = maxVal;
      alert(1)
    },
    setProgress: function (val) {
      if (val >= this.max)
      {
        val = this.max;
      }
      this.currentProgress = parseInt((val / this.max) * 100) + "%";
      this.percentEle.style.width = this.currentProgress;
      this.percentNumEle.innerText = this.currentProgress;
      this.percentNumEle.style.left = parseInt((val / this.max) * 100)- 5 + '%';

    }
  };

  function loadStart(){
    var loadbar = new LoadingBar("loadBar");
    var panel = document.getElementById('panelProcess');
    var max = 1000;
    loadbar.setMax(max);
    console.log(loadbar)
    var i = 0;
    // uploadFile();
    var time = setInterval(function () {
      loadbar.setProgress(i);
      if (i == max){
        clearInterval(time);
        alert('{$lang.upload_success}');
        panel.style.display = 'none';
        window.location.reload();
      }
      i += 10;
    }, 10);
  };

  /*panel btnClose fun*/
  (function(){
    var close = document.getElementById('btnClose');
    close.onclick = function(e){
      var item = e.target;
      var par  = item.offsetParent;
      par.style.display = 'none';
    }
  })();

  /*file upload fun*/
  function upLoad(item){
    var btn = document.getElementById('btnUpload');
    var panel = document.getElementById('panelProcess');
    var strs = new Array();
    var pic  = btn.value;
    strs = pic.split('.');
    var suffix = strs[strs.length-1];
    if(suffix !='tgz'){
      alert('{$lang.upload_format_error}');
      btn.outerHTML = btn.outerHTML;  //清空文件
    }else{
      panel.style.display = 'block';
      loadStart();
    }
  }
</script>  
